<template>
    <!-- 导航栏 -->
    <nav
        class="flex h-16 px-8 items-center justify-between shadow-md fixed top-0 w-full bg-background/95 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60 z-50 border-b">
        <!-- 图标 -->
        <div>
            <a class="flex items-center space-x-4 hover:text-primary" href="/">
                <img class="size-10 rounded-sm" src="/avatar.jpg">
                <span class="hidden sm:inline-block font-bold">
                    热爱可抵岁月漫长
                </span>
            </a>
        </div>
        <!-- 按钮 -->
        <nav class="flex items-center space-x-6 text-foreground">
            <!-- 博客按钮 -->
            <Button
            variant="ghost"
            :class="['underline-animation', { 'animate-to-end': isActive('/blog') }]"
            @click="$router.push('/blog')"
            >
            <BookOpenText class="size-4" />博客
            </Button>

            <!-- 目录按钮 -->
            <Button
            variant="ghost"
            :class="['underline-animation', { 'animate-to-end': isActive('/menu')}]"
            @click="$router.push('/menu')"
            >
            <SquareMenu class="size-4" />目录
            </Button>

            <!-- 时间轴按钮 -->
            <Button
            variant="ghost"
            :class="['underline-animation', { 'animate-to-end': isActive('/timeline') }]"
            @click="$router.push('/timeline')"
            >
            <CalendarDays class="size-4" />时间轴
            </Button>

            <!-- 标签按钮 -->
            <Button
            variant="ghost"
            :class="['underline-animation', { 'animate-to-end': isActive('/tags') }]"
            @click="$router.push('/tags')"
            >
            <Tags class="size-4" />标签
            </Button>

            <!-- 分类按钮 -->
            <Button
            variant="ghost"
            :class="['underline-animation', { 'animate-to-end': isActive('/categories') }]"
            @click="$router.push('/categories')"
            >
            <FolderOpen class="size-4" />分类
            </Button>
        </nav>
        <!-- 搜索 -->
        <div class="flex max-w-xs space-x-4">
            <!-- 搜索框 -->
            <div
                class="bg-primary-foreground w-36 rounded-3xl flex items-center justify-between ring-2 ring-transparent hover:ring-primary cursor-pointer transition duration-200">
                <!-- 左侧搜索图标 -->
                <span class="flex items-center justify-center px-2">
                    <Search class="size-4 text-muted-foreground" />
                </span>

                <span class="text-xs text-muted-foreground">Search...</span>

                <!-- 右侧快捷键提示 -->
                <span class="flex items-center justify-center px-2 space-x-1 text-muted-foreground">
                    <kbd class="bg-background size-5 rounded-sm flex items-center justify-center">
                        <svg width="15" height="15">
                            <path
                                d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953"
                                stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square">
                            </path>
                        </svg>
                    </kbd>
                    <kbd class="bg-background text-xs leading-5 size-5 rounded-sm text-center">K</kbd>
                </span>
            </div>

            <!-- 夜晚模式 -->
            <div class="flex items-center justify-end">
                <ThemeToggle />
            </div>
        </div>
    </nav>
</template>

<script lang="ts" setup>
// import { ref, onMounted, onUnmounted } from 'vue'
import { Search, FolderOpen, Tags, BookOpenText, CalendarDays, SquareMenu  } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { useRoute } from 'vue-router'
import ThemeToggle from '@/components/own/theme/ThemeToggle.vue'

// 获取当前路由信息
const route = useRoute()
const isActive = (path: string) => {
    return route.path === path;
}

</script>

<style scoped>

</style>
